@()(implicit session: Session)
@english.home.main("Download") {

    <style>



            .pull-left .search input {
                height: 30px;
            }


            a {
                color: cornflowerblue;
            }

    </style>

    <hgroup class="page-head">
        <h2>
            <span>Download</span>
        </h2>
    </hgroup>


    <div id="container" class="clearfix">
        <div id="content" class="full-width">
            <div class="tabs-container" style="padding: 10px">


                <form class="registration-form form-horizontal" id="form" accept-charset="UTF-8" style="margin-top: 30px">


                    <div class="form-group">
                        <label class="control-label col-sm-2">Organelle:</label>
                        <div class="col-sm-4">
                            <select class="form-control" onchange="changeOrganelle(this)" name="organelle" id="organelle">

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">Phylum:</label>
                        <div class="col-sm-4">
                            <select class="form-control" onchange="changePhylum(this)" name="phylum" id="phylum"></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">Class:</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="classes" id="classes"></select>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="actions col-sm-offset-2 col-sm-2">
                            <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="getDownloadData()">
                                Search</button>
                        </div>
                    </div>


                </form>
                <hr>
                <div id="result" style="display: none;">
                    <div id="checkbox" class="checkbox">
                    </div>

                    <button type="button" class="btn btn-primary" onclick="DownloadSelect('genome')">Download Genome</button>

                    <button type="button" class="btn btn-primary" onclick="DownloadSelect('cds')">Download CDS</button>
                    <button type="button" class="btn btn-primary" onclick="DownloadSelect('pep')">Download PEP</button>
                    <div id="toolbar">
                            &nbsp;
                            Keyword：
                    </div>

                    <table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
                    data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true">

                    </table>

                </div>
            </div>
        </div>
    </div>

    <script>


            let organelle = {};

            $(function () {

                $.getJSON("@routes.DownloadController.getDownloadJson()", function (data) {
                    organelle = data;
                    $("#organelle").select2({
                        data: [{
                            "id": "cp",
                            "text": "Chloroplast",
                            "selected": true
                        }, {
                            "id": "mt",
                            "text": "Mitochondria"
                        }]
                    });
                    htmlPhylum("cp");
                    htmlClass("cp", "Myzozoa");
                });


                $('#table').bootstrapTable({

                    columns: [
                        [{
                            checkbox: true,
                            align: 'center'
                        }, {
                            field:"name",
                            title:"Name",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                if(row.og == "cp"){
                                    return "<a href='/US/PODB/chloroplast/gbMoreInfo?id=" + row.id + "' target='_blank' style='color: cornflowerblue;'>" + row.genbank + "</a>"
                                }else{
                                    return "<a href='/US/PODB/mitochondria/mtMoreInfoPage?id=" + row.id + "' target='_blank' style='color: cornflowerblue;'>" + row.genbank + "</a>"
                                }
                            }
                        },{
                            field:"og",
                            title:"Organelle",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                               if(row.og == "cp"){
                                   return "Chloroplast"
                               }else{
                                   return "Mitochondria"
                               }
                            }
                        }, {
                            field: "genome",
                            title: "Genome",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                return "<a target='_blank' href='/PODB/download/downloadSelect?id=" + row.id
                                        + "&og=" + row.og + "&fa=genome' style='color: cornflowerblue;'>Fasta <i class='fa fa-download'></i></a> ";
                            }
                        }, {
                            field: "gb",
                            title: "Genbank",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                return "<a target='_blank' href='/PODB/download/downloadSelect?id=" + row.id
                                        + "&og=" + row.og + "&fa=gb'>GB <i class='fa fa-download'></i></a>";
                            }
                        },
                            {
                                field: "cds",
                                title: "CDS",
                                align: "center",
                                halign: "center",
                                valign: "middle",
                                formatter: function (value, row) {
                                    return "<a target='_blank' href='/PODB/download/downloadSelect?id=" + row.id
                                            + "&og=" + row.og + "&fa=cds' style='color: cornflowerblue;'>Fasta <i class='fa fa-download'></i></a> ";
                                }
                            }, {
                            field: "pep",
                            title: "PEP",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                return "<a target='_blank' href='/PODB/download/downloadSelect?id=" + row.id
                                        + "&og=" + row.og + "&fa=pep' style='color: cornflowerblue;'>Fasta <i class='fa fa-download'></i></a> ";
                            }
                        }]]

                });


            });

            function getDownloadData() {
                const o = $("#organelle").find(">option:selected").val();
                const p = $("#phylum").find(">option:selected").val();
                const c = $("#classes").find(">option:selected").val();
                $('#table').bootstrapTable("load", organelle[o][p][c]);
                $("#result").show();
            }

            function htmlPhylum(obj) {
                let phylum = [];
                $.each(organelle[obj], function (i) {
                    phylum.push(i)
                });
                $("#phylum").empty().select2({data: phylum});
                $("#classes").empty().select2({data: organelle[obj][phylum[0]]});
                htmlClass(obj, phylum[0]);
            }

            function htmlClass(o, p) {
                let classes = [];
                $.each(organelle[o][p], function (i) {
                    classes.push(i)
                });
                $("#classes").empty().select2({data: classes});
            }


            function changeOrganelle(obj) {
                const value = $(obj).find(">option:selected").val();
                htmlPhylum(value);
            }

            function changePhylum(obj) {
                const o = $("#organelle").find(">option:selected").val();
                const value = $(obj).find(">option:selected").val();
                htmlClass(o, value);
            }


            function DownloadSelect(obj) {
                const data =$("#table").bootstrapTable("getAllSelections");
                let id = [];
                let og = "";
                $.each(data,function (i,v) {
                    og = v.og;
                    id.push(v.id);
                });
                window.open("/PODB/download/downloadSelect?id=" + id + "&og=" + og + "&fa=" + obj);
            }

    </script>


}